<template>
  <NavBack title="注册_短信验证码"></NavBack>
  <van-form @submit="onSubmit">
    <van-field
      name="telcode"
      v-model="sms"
      center
      clearable
      label="短信验证码"
      placeholder="请输入短信验证码"
    >
      <template #button>
        <van-button
          :disabled="isDisabled"
          size="small"
          type="primary"
          @click="sendSms"
        >
          <van-count-down
            v-if="isDisabled"
            ref="downRef"
            :time="time"
            format="秒后重新发送"
            :auto-start="true"
            @finish="finishedFn"
          />
          <div v-else>发送验证码</div>
        </van-button>
      </template>
    </van-field>

    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit">
        下一步
      </van-button>
    </div>
  </van-form>
</template>
  
  <script>
import { showToast, showFailToast, showSuccessToast, showDialog } from "vant";

import NavBack from "../../components/NavBack.vue";

export default {
  name: "Sms",
  components: { NavBack },
  data() {
    return {
      sms: "",
      isDisabled: false,
      time: 5 * 1000,
      sendText: "发送验证码",
    };
  },
  methods: {
    sendSms() {
      this.isDisabled = true;
      this.sendText = this.time;
      this.$http
        .post("/user/dosendmsgcode", {
          tel: this.$route.params.tel,
        })
        .then((res) => {
          if (res.data.code === "200") {
            showSuccessToast("验证码发送成功！");
            setTimeout(function () {
              showDialog({
                title: "您的验证码",
                message: ""+res.data.data,
              }).then(() => {
              });
            }, 2000);
          }
        });
    },
    finishedFn() {
      this.isDisabled = false;
    },
    onSubmit(value) {
      console.log("value", value);
      this.$http
        .post("/user/docheckcode", {
          tel: this.$route.params.tel,
          telcode: value.telcode,
        })
        .then((res) => {
          if (res.data.code === "200") {
            this.$router.push({
              path: "/RegPass",
              query: {
                tel: this.$route.params.tel,
              },
            });
          } else if (res.data.code === "10007") {
            showFailToast("亲，验证码不正确噢！！！");
          }
        });
    },
    onClickLeft() {
      // this.$router.back();
      this.$router.go(-1);
    },
  },
};
</script>
  
  <style>
</style>